import React from "react";
import {CheckBox, makeStyles} from "@rn-vui/themed";
import {Pressable, Text, TouchableOpacity} from "react-native";
import {useThemeColors} from "../../hooks/hooks.tsx";

const useStyles = makeStyles((theme) => ({
    orderButton: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 13
    },
    orderButtonText: {
        color: '#fff',
        fontSize: 24,
    },
    subTitleText: {
        color: '#fff',
        fontSize: 18,
    },
    checkBox: {
        position: 'absolute',
        right: 0,
        top: 10,
        backgroundColor: 'transparent',
        marginVertical: 0,
        paddingHorizontal: 0
    },
    noteButton: {
        backgroundColor: theme.colors.yellow,
        position: 'absolute',
        right: 60,
        bottom: 12,
        paddingVertical: 7,
        paddingHorizontal: 10
    },
    number: {
        position: 'absolute',
        left: 10,
        top: 13,
        fontSize: 24,
        fontWeight: 'bold',
        color: theme.colors.yellow
    }
}));

export interface OrderItemButtonProps {
    title?: string;
    color?: string;
    onPress?: () => void;
    time?: string;
    status?: string;
    checked?: boolean;
    onPressCheckbox?: () => void;
    order?: any;
    onPressNote?: (order: any) => void;
    number?: number;
}

const OrderItemButton = (props: OrderItemButtonProps) => {
    const colors = useThemeColors();
    const styles = useStyles();
    const {
        order = {},
        title,
        color = colors.primary,
        time,
        status,
        onPress,
        checked = false,
        onPressCheckbox
    } = props;
    return (
        <TouchableOpacity
            activeOpacity={0.5}
            style={[
                styles.orderButton,
                {
                    backgroundColor: color
                }]}
            onPress={() => onPress?.()}
        >
            <Text style={styles.number}>NO.{props.number}</Text>
            {
                order.buyer_note?.length ? (
                    <Pressable style={styles.noteButton} onPress={() => props.onPressNote?.(order)}>
                        <Text>NOTES</Text>
                    </Pressable>
                ) : null
            }
            <Text style={styles.orderButtonText}>{title}</Text>
            {
                status === 'holdon' ? (<Text style={styles.subTitleText}>{time}</Text>) : (
                    <CheckBox
                        checked={checked}
                        checkedIcon="heart"
                        uncheckedIcon="heart-o"
                        checkedColor="red"
                        containerStyle={styles.checkBox}
                        onPress={() => onPressCheckbox?.()}
                    />
                )
            }
        </TouchableOpacity>
    );
}

export default React.memo(OrderItemButton);
